<!-- 想定描述页面 -->
<template>
    <div class="scenario-detail-container">
        <div class="scenario-detail-inner">
            <div class="scenario-detail-header">
                {{ $t("tool.scenarioEdit.scenarioInfo") }}
            </div>
            <div class="scenario-detail-content">
                <div class="s-info">
                    <div class="s-info__statistics_content">
                        <div class="s-info__statistics_item">
                            <div class="s-info__statistics_item_num">{{ nodeInfo.name }}</div>
                            <div class="s-info__statistics_item_name">{{ $t('tool.scenarioEdit.scenarioName') }}</div>
                        </div>
                        <div class="s-info__statistics_item">
                            <div class="s-info__statistics_item_num">{{ nodeInfo.data.engineBeatStep }}</div>
                            <div class="s-info__statistics_item_name">{{ $t('tool.scenarioEdit.stepSize') }}</div>
                        </div>
                        <div class="s-info__statistics_item">
                            <div class="s-info__statistics_item_num">{{ nodeInfo.data.simulationStartTime }}</div>
                            <div class="s-info__statistics_item_name">{{ $t('tool.scenarioEdit.zeroHour') }}</div>
                        </div>
                        <div class="s-info__statistics_item">
                            <div class="s-info__statistics_item_num">{{ nodeInfo.data.simulationTime }}</div>
                            <div class="s-info__statistics_item_name">{{ $t('tool.scenarioEdit.duration') }}</div>
                        </div>
                        <div class="s-info__statistics_item">
                            <div class="s-info__statistics_item_word">{{ nodeInfo.data.scenarioDescription }}</div>
                            <div class="s-info__statistics_item_name">{{ $t('tool.scenarioEdit.describe') }}</div>
                        </div>

                    </div>

                    <div class="flex" v-if="showButton">
                        <el-button class="jtyj-btn-primary" @click="downloadScenario">{{
                            $t("tool.scenarioEdit.downloadScenario")
                        }}</el-button>
                        <el-button class="jtyj-btn-primary" @click="enterScenario">{{
                            $t("tool.scenarioEdit.enterScenario")
                        }}</el-button>
                    </div>

                </div>
                <div class="s-map">
                    <MarsMap :url="configUrl" :options="configOptions" :mapKey="'selectScenario'" @onload="onMapload">
                    </MarsMap>
                </div>
            </div>

        </div>
    </div>
</template>

<script>
import MarsMap from "@/views/common-components/mars-map.vue";
var map;
var graphicLayer;
export default {
    data() {
        const basePathUrl = window.basePathUrl || ''
        return {
            configUrl: basePathUrl + '/config/map.json',
            configOptions: {
                "control": {
                    "homeButton": false,
                    "sceneModePicker": false,
                    "contextmenu": {
                        "enabled": false,
                    },
                    "zoom": {
                        "enabled": false,
                    },
                    "mouseDownView": false,
                    "locationBar": {
                        "enabled": false,
                    }
                },
            },
            form: {},
            selectedNodeInfo: {}, // 当前选中节点的信息
            scenarioDataList: [], // 想定数据列表
        }
    },
    components: {
        MarsMap,
    },
    props: {
        nodeInfo: {
            type: Object,
        },
        showButton: {
            type: Boolean,
            default: true
        }
    },

    mounted() {
        this.form = this.nodeInfo.data;
    },

    methods: {
        // 地图构造完成回调
        onMapload(mapInstance, graphicLayerInstance) {
            map = mapInstance;
            graphicLayer = graphicLayerInstance;
            this.addEntityToMap();
        },
        // 添加实体（这里只添加点和名称用于简略展示）
        addEntityToMap() {
            var graphic = new mars3d.graphic.PointEntity({
                position: [132, 27, 10000],
                style: {
                    color: Cesium.Color.RED,
                    pixelSize: 8,
                    label: {
                        text: "实体1",
                        font_size: 10,
                        pixelOffsetY: -10,
                        color: Cesium.Color.RED,
                        distanceDisplayCondition: false,
                        distanceDisplayCondition_far: 5000000,
                        distanceDisplayCondition_near: 0
                    }
                },

            })
            graphicLayer.addGraphic(graphic)
        },
        submitForm() { },
        downloadScenario() { },
        enterScenario() {
            this.$router.push({ name: "scenarioBuild", query: { scenarioId: this.nodeInfo.id } })
        },
    }
}

</script>

<style lang="scss" scoped>
.scenario-detail-container {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: center;

    .scenario-detail-inner {
        background-color: var(--ui-component-background-alt);
        width: 80%;
        height: 350px;
        margin-top: 20px;
        padding: 10px 20px;
        border-radius: 5px;

        .scenario-detail-header {
            width: 100%;
            display: flex;
            align-items: center;
            color: var(--ui-text-fg-low);
            font-size: var(--ui-font-size-base);
        }

        .scenario-detail-content {
            width: 100%;
            height: 90%;
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            font-size: var(--ui-font-size-base);

            .s-info {
                width: 50%;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                height: 100%;

                .s-info__statistics_content {
                    display: flex;
                    justify-content: space-between;
                    margin-top: 20px;
                    flex-wrap: wrap;

                    .s-info__statistics_item {
                        .s-info__statistics_item_num {
                            color: var(--ui-text-color);
                            font-size: var(--ui-font-size-title);
                        }

                        .s-info__statistics_item_word {
                            font-size: var(--ui-font-size-base);
                            color: var(--app-text-fg-low);
                        }

                        .s-info__statistics_item_name {
                            font-size: var(--ui-font-size-sm);
                            color: var(--app-text-fg-low);
                            margin-top: 10px;
                            margin-bottom: 20px;

                        }
                    }

                    & :last-child {
                        width: 100%;
                    }
                }

                .jtyj-input {
                    width: 100%;
                }

            }

            .s-map {
                width: 40%;
                height: 100%;
            }
        }
    }



}
</style>